<template>
	<el-dialog width="500px" title="添加品类" :visible.sync="dialogVisible" :close-on-click-modal="false">
		<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
			<el-form-item label="订单来源" prop="from_name">
        <el-select v-model="form.from_name" clearable multiple placeholder="请选择来源" @change="handleFrom">
          <el-option v-for="item in fromList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="风控等级" prop="grade_name">
        <el-select v-model="form.grade_name" clearable multiple placeholder="请选择风控" @change="handleGrade">
          <el-option v-for="item in gradeList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品品类" prop="goods_name">
        <el-select v-model="form.goods_name" clearable multiple placeholder="请选择商品品类" @change="handleGoods">
          <el-option v-for="item in goodsList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="监管设备" prop="is_supervise">
        <el-select v-model="form.is_supervise" clearable placeholder="请选择监管设备" @change="handleSupervise">
          <el-option v-for="item in superviseList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="履约状态" prop="performance">
        <el-select v-model="form.performance" clearable multiple placeholder="请选择履约状态" @change="handlePerformance">
          <el-option v-for="item in performanceList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="成新度" prop="is_news">
        <el-select v-model="form.is_news" clearable multiple placeholder="请选择成新度" @change="handleNews">
          <el-option v-for="item in newsList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="dialogVisible = false">取 消</el-button>
			<el-button size="small" type="primary" @click="submit">确 定</el-button>
		</div>
	</el-dialog>
</template>
  
<script>
import { addSupplierCategory,addSupplierData } from '@/api/user'
export default {
	props: {
		editId: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			form: {
				from_name: '',
				grade_name: '',
				goods_name:'',
				is_news:'',
				performance:'',
        is_supervise:''
			},
			shopList: [],
			goodsList:[],
      gradeList:[],
      fromList:[],
			newsList:[],
			performanceList:[],
      superviseList:[],
			dialogVisible: false
		}
	},
	watch: {
    dialogVisible(val) {
      if (val) {
        addSupplierData().then(res=>{
          this.fromList=res.source
          this.gradeList=res.risk
          this.newsList=res.new_grade
          this.goodsList=res.category
          this.performanceList=res.performance
          this.superviseList=res.supervise
        })
        // 获取商户数据
      } else {
        this.$refs['ruleForm'].resetFields()
      }
    }
  },
	methods: {
		submit() {
			this.$refs['ruleForm'].validate((valid) => {
				if (valid) {
					let params={
						order_shop_id: this.editId,
            category:'1:'+this.form.from_name+'|'+'2:'+this.form.grade_name+'|'+'3:'+this.form.goods_name+'|'+'4:'+this.form.is_news+'|'+'5:'+this.form.is_supervise+'|'+'6:'+this.form.performance
					}
					addSupplierCategory(params).then(res => {
						this.dialogVisible = false
						this.$emit('getList', true)
					})
				} else {
					this.$message({
						message: '请检查表单错误',
						type: 'error'
					})
					return false
				}
			})
		}
	}
}
</script>
  
<style lang="scss" scoped></style>
  